
	<meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />
	<title></title>
	
	<link rel="stylesheet" type="text/css" href="<?=base_url()?>files/css/additional/registration.css" media="all" />
	<style>
		.tablesorter{
			
		}
		.tablesorter .header{
			width:auto;
			height:auto;
			background-color:#CDCDCD;
			text-shadow:none;
			box-shadow: none;
			-moz-box-shadow: none;
			-webkit-box-shadow: none;
			min-width:150px;
			border-radius:10px;
		}
		.tablesorter tfoot{
			background-color:#CDCDCD;
		}
		.pagers{
			margin: 0 auto;
			width:279px;
		}
		.overlay-pagers{
			width: 100%;
		}
	</style>
	
	<link rel="stylesheet" href="<?= base_url()  ?>files/css/additional/tablesorter/style.css" type="text/css" media="print, projection, screen" />	
	<script type="text/javascript" src="<?= base_url()  ?>files/js/sorter/jquery.tablesorter.js"></script>
	<script type="text/javascript" src="<?= base_url()  ?>files/js/sorter/jquery.tablesorter.pager.js"></script>
	<script type="text/javascript">
    	$(function() {
		$("table")
			.tablesorter({widthFixed: true, widgets: ['zebra']})
			.tablesorterPager({container: $("#pagers")});
		});
	</script>
	<script>
	
	$(document).ready(function(){
		var field_values = {
            //id        :  value
            'name'  : 'Building Name',
            'city' : 'City',
            'ip'  : 'IP Address'
		};
    //inputfocus
	$("#registration").hide();
	$("#showregister").click(function(e){
	
		e.preventDefault();
		
		$("#show-registration").slideUp();
		$("#list").slideUp();
		$("#registration").slideDown();
	});
	$("#hideregister").click(function(e){
		e.preventDefault();
		$("#registration").slideUp();
		$("#list").slideDown();
		$("#show-registration").slideDown();
		
	});
    //reset progress bar
    $('#progress').css('width','0');
    $('#progress_text').html('0% Complete');
		$("#submit_first").click(function(e){
			e.preventDefault();
			var fields = $("#first_step input[type=text]");
			var error=false;
			fields.each(function(){
				value=$(this).val();		
				if( (value.length < 2) || value==field_values[$(this).attr('id')] ){
					$(this).addClass('error');
					$(this).effect("shake", { times:3 }, 50);
					//$('#msg'+$(this).attr('id')+'').html($(this).attr('id')+' cannot be empty');
					error=true;
				}else{
					$(this).addClass("valid");
				}			
			});
			if(!error){
					//update progress bar
					$('#progress_text_bl').html('50% Complete');
					$('#progress_bl').css('width','169px');
					//slide steps
					$('#first_step').slideUp();
					$('#second_step').slideDown();
				
				
			}else{
				return false;
			}
		});
		$("#submit_second").click(function(e){
			e.preventDefault();
			var fields = $("#second_step input[type=text]");
			var error=false;
			fields.each(function(){	
			
				value=$(this).val();
				
				if( (value.length < 3 ) || value==field_values[$(this).attr('id')]  ){
					$(this).addClass('error');	
					$(this).effect("shake", { times:3 }, 50);					
					error=true;
				}else{
					
					$(this).addClass("valid");
				}				
			});
			
			if(!error){
					//update progress bar
					$('#progress_text_bl').html('100% Complete');
					$('#progress_bl').css('width','339px');
					//updating summary
					$("#nameresult").html($("#name").val());
					$("#cityresult").html($("#city").val());
					$("#buildingtyperesult").html($("#building"+$("#building_type_id").val()).html());
					$("#ipresult").html($("#ip").val());
					//slide steps
					$('#second_step').slideUp();
					$('#third_step').slideDown();
				

			}else{
				return false;
			}
		});
		$("#submit_third").click(function(e){
				e.preventDefault();	
				$('#third_step').slideUp();
				$('#loading_step').slideDown();
					var response=0;
					var message="";

					$.post("<?=site_url('building/addition_action')?>",$("#registerform").serialize(),function(resp){
								response=resp.response;
								message=resp.data.message;
								
								
					},"json")
					.error(function(){
						alert("Cobalah beberapa saat lagi");
						return false;
						})
					.complete(function(){
						$('#first_step').slideDown();
						$('#loading_step').slideUp();
						alert(message);
					});
				
		});
	   
	});
	</script>
</head>

<body>
	<div id="registration">
	<div id="containerregister">
        <form id="registerform" action="<?=site_url('authorization/register_action')?>" method="post">
	
            <!-- #first_step -->
            <div id="first_step">
                <h1>Add <span>Building</span></h1>

                <div class="form">
					<input type="text" name="name" id="name" value="Building Name" />
                    <label id="label-name" for="name">Building Name. </label>
                    <input type="text" name="city" id="city" value="City" />
                    <label id="label-city" for="city">City. </label> 
                     </div>
<!-- clearfix --><div class="clear"></div><!-- /clearfix -->
					 
                <input class="submit" type="submit" name="submit_first" id="submit_first" value="" />
               <!-- clearfix --><div class="clear"></div><!-- /clearfix -->
			</div>

            <!-- #second_step -->
            <div id="second_step">
                <h1>Add <span>Building</span></h1>

                <div class="form">
					<select id="building_type_id" name="building_type_id">
                       <?=$buildingtypelist?>
                    </select>
                    <label for="gender">Building Type.</label> <!-- clearfix --><div class="clear"></div><!-- /clearfix -->
                    <input type="text" name="ip" id="ip" value="IP Address" />
                    <label id="label-ip" for="ip">IP Address.</label>			
                </div>      <!-- clearfix --><div class="clear"></div><!-- /clearfix -->
                <input class="submit" type="submit" name="submit_second" id="submit_second" value="" />
            </div>      <!-- clearfix --><div class="clear"></div><!-- /clearfix -->


            
            
            <!-- #third_step -->
            <div style="display:none;" id="third_step">
                <h1>Register <span>Sales</span></h1>
                <div class="form">
                    <h2>Summary</h2>
                    
                    <table>
						<tr><td>Name</td><td><span id="nameresult"></span></td></tr>
                        <tr><td>City</td><td><span id="cityresult"></span></td></tr>
                        <tr><td>building type</td><td><span id="buildingtyperesult"></span></td></tr>
                        <tr><td>IP Address</td><td><span id="ipresult"></span></td></tr>
                    </table>
                </div>      <!-- clearfix --><div class="clear"></div><!-- /clearfix -->
                <input class="send submit" type="submit" name="submit_third" id="submit_third" value="" />            
            </div>
            <div style="display:none;" id="loading_step">
                
						<img src="<?=base_url()?>files/images/additional/loading-register.gif"></img>
					 
                     <!-- clearfix --><div class="clear"></div><!-- /clearfix -->
                <input class="send submit" type="submit" name="submit_forth" id="submit_forth" value="" />            
            </div>
        </form>
	</div>
	<div id="progress_bar_bl">
        <div id="progress_bl"></div>
        <div id="progress_text_bl">0% Complete</div>
	</div>
	<div style="z-index:100033333;margin:0 auto;margin-top:47px;width:50px">
			<a id="hideregister" href="#"><img width="40" height="40" src="<?=base_url()?>files/images/additional/registration-arrow-up.jpg"></a>
	</div>
	</div>
	<div style="width:100%">
	<div style="margin:0 auto;width:50px" id="show-registration">
			<a href="#" id="showregister"><img width="40" height="40" src="<?=base_url()?>files/images/additional/registration-arrow-down.jpg"></img></a>
	</div>
	<div id="list">
		<table class="tablesorter">
				<thead>
					<tr>						
						<th width='20px'>Nama</th>
						<th>Kota</th>
						<th>IP</th>
						<th>Tipe</th>
					</tr>
				</thead>
				<tbody>
					  
					 <?php foreach($building as $bl):?>
						 <tr>
							 <td><?= $bl->name?></td>
							 <td><?= $bl->city?></td>
							 <td><?= $bl->ip?></td>
							 <td><?= $building_model->getType('name','id='.$bl->building_type_id)?></td>
						 </tr>
					 <?php
					 endforeach;
					 ?>
				</tbody>
		</table>
		<div id="overlay-pagers" class="overlay-pagers">
		<div id="pagers" class="pagers">
				<form>
					<img src="<?=base_url()?>files/images/pager/arrow_left.gif" class="first"/>
					<img src="<?=base_url()?>files/images/pager/arrow_left.gif" class="prev"/>
					<input type="text" class="pagedisplay"/>
					<img src="<?=base_url()?>files/images/pager/arrow_right.gif" class="next"/>
					<img src="<?=base_url()?>files/images/pager/arrow_right.gif" class="last"/>
					<select class="pagesize">
						<option selected="selected"  value="10">10</option>
						<option value="20">20</option>
					</select>
				</form>
		</div>
		</div>
		</div>
	</div>
